<template>
	<view class="content">
		<form>
			<view class="goods_box">
				<img src="/static/por5.jpg">
				<view class="goods_name">百达翡丽推出新款自动上弦万年历腕表，采用当代“复古”风格表壳</view>
				<view class="goods_info"><b>¥605900.00</b><span>X 1</span></view>
			</view>
			<view class="cu-form-group">
				<textarea data-placeholder="输入评论内容" maxlength="-1" :disabled="modalName!=null" placeholder-class='placeholder'
				 :class="textareaAValue?'value':''" @input="textareaAInput"></textarea>
			</view>
			
			<view class="cu-form-group relative">
				<view class="star_box">
					<text>描述相符：</text>
					<uni-rate active-color="#8c0027" sizecolor="#8c0027" size="20" :value="4"></uni-rate>
				</view>
			</view>
			<view class="cu-form-group relative">
				<view class="star_box">
					<text>服务评分：</text>
					<uni-rate active-color="#8c0027" sizecolor="#8c0027" size="20" :value="4"></uni-rate>
				</view>
			</view>
			<view class="cu-form-group relative">
				<view class="star_box">
					<text>物流评分：</text>
					<uni-rate active-color="#8c0027" sizecolor="#8c0027" size="20" :value="4"></uni-rate>
				</view>
			</view>
			<view class="cu-form-group relative">
				<view class="star_box">
					<text>商品评分：</text>
					<uni-rate active-color="#8c0027" sizecolor="#8c0027" size="20" :value="4"></uni-rate>
				</view>
			</view>
			
			<view class="cu-bar bg-white margin-top">
				<view class="action">评论图片</view>
				<view class="action">{{imgList.length}}/5</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="padding-xs bg-img" :style="'background-image:url(' + imgList[index] +')'" v-for="(item,index) in imgList"
					 :key="index" @tap="ViewImage" :data-url="imgList[index]">
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='coolc icon-cuohao'></text>
						</view>
					</view>
					<view class="padding-xs solids" @tap="ChooseImage" v-if="imgList.length<5">
						<text class='coolc icon-shuma'></text>
					</view>
				</view>
			</view>
			
			<view class="cu-form-group p15">
				<button class="cu-btn lg w-100">提交评论</button>
			</view>
		</form>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	export default {
		components:{
			uniRate
		},
		data() {
			return {
				imgList: [],
				modalName:null,
				textareaAValue: '',
				textareaBValue: ''
			};
		},
		methods: {

			ChooseImage() {
				uni.chooseImage({
					count: 5, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			ViewImage(e) {
				console.log(e)
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '召唤师',
					content: '确定要删除这段回忆吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},
			textareaBInput(e) {
				this.textareaBValue = e.detail.value
			}
		}
	}
</script>

<style lang='scss'>
.w-100 { width:100%; background:$vui_bgcolor; color:$bgcolor_white; }
.p15 { padding:30upx; }
.goods_box {
	width:100%; height:170upx; background:$bgcolor_white; position:relative; padding:26upx; margin-bottom:30upx; padding-left:176upx;
	img { height:118upx; height:118upx; border:1px solid #eeeeee; border-radius:10upx; position:absolute; left:26upx; top:26upx; }
	.goods_name { width:100%; height:80upx; line-height:36upx; font-size:$font-base; color:$font-color-666; }
	.goods_info {
		width:100%; height:38upx;
		b { color:$vui_bgcolor; padding-right:20upx; }
		span { color:$font-color-ccc; }
	}
}
.star_box {
	position:absolute; left:26upx; top:32upx;
	text { height:18px; line-height:18px; color:$font-color-999; display:block; float:left; font-size:24upx; }
	.uni-icon-star-filled { display:block; float:left; }
}
</style>